@charset "utf-8";
@import "reset";
@import "utils";
@import "common";
body {
    overflow: hidden;
}

.Fricrion-web {
    @include webbg;
    .text {
        width: r(480);
        height: r(550);
        margin: 0 auto;
        padding-top: r(40);
        @include aImg;
    }
    #btn{
         width: r(160);
        height: r(160);
        margin: 0 auto;
        border: 1px solid white;
        border-radius: 50%;
        font-size: r(60);
        text-align: center;
        line-height: r(160);
        background: none;
        margin-left: 38%;
        color: white;
        letter-spacing: r(5);
    }
    // 按钮
//  .start {
//      width: r(160);
//      height: r(160);
//      margin: 0 auto;
//      border: 1px solid white;
//      border-radius: 50%;
//      font-size: r(60);
//      text-align: center;
//      line-height: r(160);
//      color: white;
//      letter-spacing: r(5);
//  }
    //  进度条
    .Progress {
//      width: r(480);
        width: 80%;
        margin: 0 auto;
        position: relative;
        .xiaokuang {
            width: r(60);
//          width: 10%;
            height: r(30);
            background: white;
            position: absolute;
            top: r(-35);
            left: -5%;
            border-radius: r(10);
            font-size: r(12);
            text-align: center;
            z-index: 3;
            line-height: r(30);
            .jiaotou {
                width: r(10);
                height: r(20);
                background: white;
                position: absolute;
                left: r(22);
                bottom: r(-5);
                z-index: -2;
                transform: rotate(137deg);
            }
        }
        .Progress1 {
            width: 98%;
            height: r(7);
            margin: 0 auto;
            background: #716346;
            border-radius: r(20);
            margin-top: r(50);
            padding-left: 2%;
            padding-top: r(3);
            position: relative;
            .dian{
                width: r(6);
                height: r(6);
                border-radius: 50%;
                background: white;
                position: absolute;
                left: 0;
                top: r(2);
            }
            .jindu{
                width: 0%;
                transition: width .05s;
                height: r(4);
                background: white;
                border-radius: r(20);
            }
        }
        .shubiao {
            width: r(400);
            height: r(35);
            background: #2f241d;
            float: right;
            color: #ffa800;
            font-size: r(10);
            line-height: r(35);
            text-align: center;
            border-radius: r(20);
            margin-top: r(20);
        }
    }
    //  手指滑动
    .wobble{
            animation-duration: 5s;
        }
    .huadong {
        width: r(210);
        height: r(290);
        position: absolute;
        right: 0;
        bottom: r(150);
        
        ul li {
            width: r(56);
            height: r(46);
            float: left;
            @include aImg;
        }
        li:first-child {
            margin-top: r(110);
            margin-left: r(10);
        }
        li:last-child {
            margin-top: r(60);
            margin-left: r(35);
        }
        .xingxing {
            width: r(120);
            height: r(70);
            position: absolute;
            top: r(5);
            right: r(20);
            img {
                height: 30%;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
        }
        .shouzhi {
            width: r(180);
            height: r(190);
            position: absolute;
            right: r(-40);
            bottom: r(10);
            img {
                height: 100%;
            }
        }
    }
    //  灯光效果
    .dengguang,
    .dengguang2 {
        transition: all .5s;
        opacity: 0;
    }
    .dengguang {
        position: absolute;
        left: r(86);
        bottom: r(95);
        width: r(25);
        height: r(25);
        background: linear-gradient(to top, #cff1ff, #68c8ff, #cff1ff);
        border-radius: 50%;
        border: 2px solid #2f91bf;
        box-shadow: 0 0 30px 30px rgba(215, 228, 237, .8);
    }
    .dengguang2 {
        position: absolute;
        top: r(350);
        right: r(198);
        width: r(18);
        height: r(60);
        background: rgba(248, 254, 252, .9);
        border-radius: 50%;
        box-shadow: 0 0 30px 30px rgba(248, 254, 252, .6)
    }
}